<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title></title>
	<!--[if !IE]><!-->
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<link  rel="stylesheet" type="text/css" href="css/new-group.css"/>
	<!--<![endif]-->
	<!--[if lt IE 9]>
	<link rel="stylesheet" type="text/css" href="css/style-ie8.css" />
	<link rel="stylesheet" type="text/css" href="css/new-group-ie8.css" />
	<![endif]-->
    <link href="css/menu.css" rel="stylesheet"/>

    <link rel="SHORTCUT ICON" href="images/icon/logo-head.png"/>
    <script src="scripts/jquery-1.8.3.min.js"></script>
    <script src="scripts/main.js"></script>

</head>
<body>
<div class="main">
    <div class="header">
        <div class="header-container">
            <div class="header-menu">
                <ul class="menu-list">
                    <li class="menu-item"><a href="#" id="menu-item1">Item 1</a></li>
                    <li class="menu-item"><a href="#" id="menu-item2">Item 2</a></li>
                    <li class="menu-item"><a href="#" id="menu-item3">Item 3</a></li>
                    <li class="menu-item"><a href="#" id="menu-item4">Item 4</a></li>
                </ul>
            </div>
            <div class="header-logo">LOGO</div>
            <div class="header-log">
                <div class="btn-expand-login" id="expand-login-btn">Login</div>
	            <div class="lbl-profile" id="profile-label">
		            <span class="user-name">Username</span>
		            <span class="user-avt" style="background-image: url('resources/avt/avt0.jpg')"></span></div>
            </div>
        </div>
    </div>
    <div class="cover">
        <div class="cover-container">
        </div>

    </div>
    <div class="page">
        <div class="page-container">
            <div class="page-cont-left team-rank">
                <div class="page-cont-title">
                    <span class="cont-title-bold">Text</span><span class="cont-title-sub">Sub text</span>
                </div>
                <div class="page-cont-title-sub">
                    <span class="cont-title-sub">Sub text</span>
                    <i class="sub0"></i>
                </div>
                <div class="team-list-head">
                    <div class="team-list-head-item">Lost</div>
                    <div class="team-list-head-item">Won</div>
                    <div class="team-list-head-item">Points</div>
                    <div class="team-list-head-item">Played</div>
                </div>
                <ul class="team-list">

                    <li class="team-item">
                        <div class="team-item-rank award">
                            1
                        </div>
                        <div class="team-item-icon-panel">
                            <img src="resources/img/png1.png"/>
                        </div>
                        <span class="team-item-name">Daan</span>

                        <div class="team-item-score"> 9,777</div>
                        <div class="team-item-score"> 8,777</div>
                        <div class="team-item-score"> 5,666</div>
                        <div class="team-item-score"> 4,111</div>
                    </li>
                    <li class="team-item">
                        <div class="team-item-rank award">
                            2
                        </div>
                        <div class="team-item-icon-panel">
                            <img src="resources/img/png1.png"/>
                        </div>
                        <span class="team-item-name">Hans</span>

                        <div class="team-item-score"> 9,777</div>
                        <div class="team-item-score"> 8,777</div>
                        <div class="team-item-score"> 5,666</div>
                        <div class="team-item-score"> 4,111</div>
                    </li>
                    <li class="team-item">
                        <div class="team-item-rank award">
                           3
                        </div>
                        <div class="team-item-icon-panel">
                            <img src="resources/img/png1.png"/>
                        </div>
                        <span class="team-item-name">Hans</span>

                        <div class="team-item-score"> 9,777</div>
                        <div class="team-item-score"> 8,777</div>
                        <div class="team-item-score"> 5,666</div>
                        <div class="team-item-score"> 4,111</div>
                    </li>
                    <li class="team-item">
                        <div class="team-item-rank">
                            4
                        </div>
                        <div class="team-item-icon-panel">
                            <img src="resources/img/png1.png"/>
                        </div>
                        <span class="team-item-name">Hans</span>

                        <div class="team-item-score"> 9,777</div>
                        <div class="team-item-score"> 8,777</div>
                        <div class="team-item-score"> 5,666</div>
                        <div class="team-item-score"> 4,111</div>
                    </li>
                    <li class="team-item">
                        <div class="team-item-rank">
                           10
                        </div>
                        <div class="team-item-icon-panel">
                            <img src="resources/img/png1.png"/>
                        </div>
                        <span class="team-item-name">Hans</span>

                        <div class="team-item-score"> 9,777</div>
                        <div class="team-item-score"> 8,777</div>
                        <div class="team-item-score"> 5,666</div>
                        <div class="team-item-score"> 4,111</div>
                    </li>
                    <li class="team-item">
                        <div class="team-item-rank">
                            199
                        </div>
                        <div class="team-item-icon-panel">
                            <img src="resources/img/png1.png"/>
                        </div>
                        <span class="team-item-name">Hans</span>

                        <div class="team-item-score"> 9,777</div>
                        <div class="team-item-score"> 8,777</div>
                        <div class="team-item-score"> 5,666</div>
                        <div class="team-item-score"> 4,111</div>
                    </li>
                    <li class="team-item">
                        <div class="team-item-rank">
                            1,099
                        </div>
                        <div class="team-item-icon-panel">
                            <img src="resources/img/png1.png"/>
                        </div>
                        <span class="team-item-name">Hans</span>

                        <div class="team-item-score"> 9,777</div>
                        <div class="team-item-score"> 8,777</div>
                        <div class="team-item-score"> 5,666</div>
                        <div class="team-item-score"> 4,111</div>
                    </li>
                    <li class="team-item">
                        <div class="team-item-rank">
                            19,888
                        </div>
                        <div class="team-item-icon-panel">
                            <img src="resources/img/png1.png"/>
                        </div>
                        <span class="team-item-name">Hans</span>

                        <div class="team-item-score"> 9,777</div>
                        <div class="team-item-score"> 8,777</div>
                        <div class="team-item-score"> 5,666</div>
                        <div class="team-item-score"> 4,111</div>
                    </li>
                    <li class="team-item">
                        <div class="team-item-rank">
                            129,000
                        </div>
                        <div class="team-item-icon-panel">
                            <img src="resources/img/png1.png"/>
                        </div>
                        <span class="team-item-name">Hans</span>

                        <div class="team-item-score"> 9,777</div>
                        <div class="team-item-score"> 8,777</div>
                        <div class="team-item-score"> 5,666</div>
                        <div class="team-item-score"> 4,111</div>
                    </li>
                </ul>
                <div class="page-cont-control">
                    <div class="page-cont-button" id="page-cont-button-next"></div>
                    <div class="page-cont-button" id="page-cont-button-prev"></div>
                    <div class="page-cont-button-save" id="page-cont-button-save">Save</div>
                </div>
            </div>
            <div class="page-cont-right">
                <div class="page-cont-title light">
                    <span class="cont-title-bold">Text</span>
                </div>
                <div class="page-cont-rate">
                    <p class="page-cont-label">115,098 participants</p>

                    <p class="page-cont-label">5,981,178 predictions</p>
                </div>
                <ul class="page-cont-tip-list">
                    <li class="page-cont-tip-item">
                        <div class="page-cont-tip-icon"><i class="tip-num">1</i></div>
                        <div class="page-cont-tip-info">
                            <div class="page-cont-tip-title">Enter your predictions</div>
                            <div class="page-cont-tip-des">You will score points when you predict the correct winner, or
                                the exact score of one or both teams
                            </div>
                        </div>
                    </li>
                    <li class="page-cont-tip-item">
                        <div class="page-cont-tip-icon"><i class="tip-num">2</i></div>
                        <div class="page-cont-tip-info">
                            <div class="page-cont-tip-title">Enter your predictions</div>
                            <div class="page-cont-tip-des">You will score points when you predict the correct winner, or
                                the exact score of one or both teams
                            </div>
                        </div>
                    </li>
                    <li class="page-cont-tip-item">
                        <div class="page-cont-tip-icon"><i class="tip-num">3</i></div>
                        <div class="page-cont-tip-info">
                            <div class="page-cont-tip-title">Enter your predictions</div>
                            <div class="page-cont-tip-des">You will score points when you predict the correct winner, or
                                the exact score of one or both teams
                            </div>
                        </div>
                    </li>
                </ul>
                <div class="page-cont-ref"></div>
            </div>
            <div class="page-clear"></div>
        </div>

    </div>
    <div class="footer">
        <div class="footer-container">
            <div class="footer-menu">
                <ul class="nav-list">
                    <li class="nav-item"><span>About us</span></li>
                    <li class="nav-item"><a href="#">Frequently asked questions</a></li>
                    <li class="nav-item"><a href="#">Terms of use</a></li>
                    <li class="nav-item"><a href="#">Contact us</a></li>
                    <li class="nav-item"><a href="#">Privacy statement</a></li>
                </ul>
	            <ul class="nav-list">
		            <li class="nav-item"><span href="#">Our competitions</span></li>
		            <li class="nav-item"><a href="#">Eredivisie</a></li>
		            <li class="nav-item"><a href="#">Champions League</a></li>
		            <li class="nav-item"><a href="#">Top League</a></li>
	            </ul>
	            <ul class="nav-list">
		            <li class="nav-item"><span href="#">Copyright</span></li>
	            </ul>
	            <div class="social-list">
		            <div class="social-title">Follow us</div>
		            <div class="social-item facebook"></div>
		            <div class="social-item twitter"></div>
	            </div>
            </div>
        </div>
    </div>
</div>
<div class="popup undisplayed" id="login-popup">
    <div class="popup-container">
        <div class="popup-form">
            <div class="page-cont-title">
                <span class="cont-title-bold">Login</span><span class="cont-title-sub">Sub text</span>
                <span class="popup-btn-close" id="popup-btn-login-close"></span>
            </div>
            <div class="page-cont-title-sub">
                <span class="cont-title-sub"></span>
                <i class="sub1"></i>
            </div>
            <div class="user-item-avatar-panel default">
                <span class="user-avt default"></span>
            </div>

            <div class="popup-mess-row"><i class="bullet"></i>
                <span> Log in with your email address or </span>
                <a class="popup-link" id="btn-expand-register">create an account.</a>
            </div>
            <div class="popup-input-row"><span>Email</span><input type="text"/></div>
            <div class="popup-input-row"><span>Password</span><input type="password"/></div>
	        <span class="popup-error-mess"><i></i> Password is not correct!</span>
	        <div class="popup-btn-row">
	            <a class="popup-btn-login-facebook" href="#">Facebook</a>
	            <a class="popup-btn-login" href="#">Login</a>
            </div>
	        <div class="popup-mess-row">
		        <a class="popup-btn-forgot" href="#"><i class="bullet red"></i><span> Forgot your password?</span></a>
	        </div>

            <span class="loading-spin undisplayed"></span>
        </div>
        <div class="popup-bottom"></div>
    </div>
</div>

<div class="popup undisplayed" id="register-popup">
    <div class="popup-container">
        <div class="popup-form">
            <div class="page-cont-title">
                <span class="cont-title-bold">Register</span><span class="cont-title-sub">Sub text</span>
                <span class="popup-btn-close" id="popup-btn-register-close"></span>
            </div>
            <div class="page-cont-title-sub">
                <span class="cont-title-sub"></span>
                <i class="sub0"></i>
            </div>
            <span class="popup-error-mess"><i></i> Input is not correct!</span>

            <div class="popup-input-row"><span>Name</span><input type="text"/></div>
            <div class="popup-input-row"><span>Email</span><input type="text"/></div>
            <div class="popup-input-row"><span>Confirm</span><input type="text" placeholder="email"/></div>
            <div class="popup-input-row"><span>Password</span><input type="password"/></div>
            <div class="popup-input-row"><span>Confirm</span><input type="password" placeholder="password"/></div>
            <div class="popup-btn-row">
                <a class="popup-btn-login" id="btn-register" href="#">Register</a>
            </div>
            <span class="loading-spin undisplayed"></span>
        </div>
        <div class="popup-bottom"></div>
    </div>
</div>

</body>
</html>
